<template>
  <div>
    <a-modal v-model="visible" centered :footer="null" width="800px">
      <a-descriptions :column="2">
        <a-descriptions-item label="售后服务单编号"> {{ information.refundSn }} </a-descriptions-item>
        <a-descriptions-item label="创建时间"> {{ information.createDate }} </a-descriptions-item>
      </a-descriptions>
      <a-table class="table" :rowKey="(record, index) => index" :columns="goodsColumns" :dataSource="dataSourceData" :pagination="false" ref="table" />
      <a-descriptions :column="2">
        <a-descriptions-item label="物流公司"> 顺丰速运 </a-descriptions-item>
        <a-descriptions-item label="运单号"> {{ information.trackingNumber }} </a-descriptions-item>
        <a-descriptions-item label="收货地址">
          {{ information.province }} {{ information.city }} {{ information.district }} {{ information.address }}&nbsp;&nbsp;&nbsp; {{ information.name }} {{ information.phone }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    dataSourceData: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      information: {},
      goodsColumns: [
        {
          title: '时间',
          align: 'center',
          dataIndex: 'acceptTime'
        },
        {
          title: '地点',
          dataIndex: 'acceptAddress',
          width: '350px'
        },
        {
          title: '详情',
          dataIndex: 'remark',
          align: 'center'
        }
      ],
      visible: false
    }
  },
  computed: {},
  methods: {
    show() {
      this.visible = true
    },
    save(data) {
      this.information = data
      console.log(data, 'data')
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 24px;
}
.table {
  margin-top: 20px;
  margin-bottom: 32px;
}
</style>
